<template>
  <div id="sfpk10Page" class="view">
    <game-header :caipiaoTerm='caipiaoTermCon' :caipiaoName='caipiaoName'></game-header>
    <el-tabs type="border-card" v-model="activeName" @tab-click='changeTab'>
      <el-tab-pane v-for="item in gameArr" :key="item.order" :label="item.backup1" :name="item.order">
        <el-tabs  v-model="activeName2">
          <el-tab-pane v-for="p in item.children"  :key="p.order2" :label="p.name" :name="p.order2">
          	<component :is="p.myTab" :caipiaoTerm='caipiaoTermCon' :childArr = "p"></component>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import header from '../../gamesub/header'
  import nav from '../../gamesub/nav'
  import cgj from './play/cgj'
  import cgyj from './play/cgyj'
  import cqsm from './play/cqsm'
  import dwdx from './play/dwdx'
  import lm from './play/lm'
  import lh from './play/lh'
  import gyjxy from './play/gyjxy'
  import gyzh from './play/gyzh'
  import gyzh2 from './play/gyzh/gyzh'

  export default {
    data () {
      return {
      	caipiaoName: '三分PK拾',
        activeName: '0',
        activeName2: '0',
        caipiaoTerm: 1,
        caipiaoTermCon: 2123123123,
        ticketId: 18,
        gameArr: []
      }
    },
    created () {
    	let arr = this.$store.state.allGameList
    	arr.forEach(item => {
    		if(item.ticketId === this.ticketId) {
    			this.gameArr = item.list
    		}
    	})
    	console.log(this.gameArr)
    },
    activated () {
      alert('activated')
    },
    methods: {
      changeTab () {
    		this.activeName2 = "0"
    	}
    },
    components: {
      'game-header': header,
      'game-nav': nav,
      'my-cgj': cgj,
      'my-cgyj': cgyj,
      'my-cqsm': cqsm,
      'my-dwdx': dwdx,
      'my-lm': lm,
      'my-lh': lh,
      'my-gyjxy': gyjxy,
      'my-gyzh': gyzh,
      'my-gyzh-gyzh': gyzh2
    }
  }
</script>

<style lang="less">
    #sfpk10Page{
    /*border:1px solid #ccc;*/
    .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
      background-color: #f13131;
      color: white;
    }
    .content {
      background-color: #fff;
      border-bottom: 1px solid #ddd;
    }

    }
</style>
